{% extends 'common/base.html' %}
{% block title %}
    test
{% endblock %}
{% block page_content %}
    <form action="" method="post" >
        <input name="first_name" type="text"/>
        <input name="last_name" type="text"/>
        <input type="submit"/>
    </form>
    <p>Hello: <span id="name"></span></p>
    <br>
    <form action="" method="post" >
        <input type="text"/>
        <input type="text"/>
        <input type="submit"/>
    </form>
{% endblock %}
{% block scripts %}
    <script type="text/javascript">
        var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};
        var data = {
                    "first_name": $("input[name=first_name]").val(),
                    "last_name": $("input[name=last_name]").val(),
                }
        function ajaxForm() {
            $.ajax({
                type: "POST",
                url: $SCRIPT_ROOT ,
                dataType: "json",
                data:data,
                error: function (XMLResponse) {
                    alert(XMLResponse.responseText)
                },
                success: function (data, textStatus) {
                    $("#name").text(data.name);
                }
            });
            return false;
        }
    </script>
{% endblock %}
